{% extends 'base.html' %}

{% block title %}注册{% endblock %}

{% load static %}
{% block content %}
    <style>
        /* 复用 login.html 的样式 */
        :root {
            --primary-blue: #524eef;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        body {
            background: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            background: linear-gradient(to bottom,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .register-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .register-container h2 {
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .register-container form p {
            margin-bottom: 1rem;
        }

        .register-container form p label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-gray);
        }

        .register-container form p input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--primary-blue);
            border-radius: 0.5rem;
            font-size: 16px;
            color: var(--text-gray);
        }

        .register-container form button {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 0.5rem;
            padding: 0.8rem 1.5rem;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .register-container form button:hover {
            opacity: 0.9;
        }

        
    </style>

    <div class="register-container">
        
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card my-5">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">注册</h2>
                        <div>
                            
                            <form method="post" style="width: 90%;">
                                {% csrf_token %}
                                <!-- 用户名输入框 -->
                                <p>
                                    <label for="{{ form.username.id_for_label }}">用户名</label>
                                    {{ form.username }}
                                </p>
                                <!-- 邮箱输入框 -->
                                <p>
                                    <label for="{{ form.email.id_for_label }}">邮箱</label>
                                    {{ form.email }}
                                </p>
                                <!-- 密码输入框 -->
                                <p>
                                    <label for="{{ form.password.id_for_label }}">密码</label>
                                    {{ form.password }}
                                </p>
                                <!-- 确认密码输入框 -->
                                <p>
                                    <label for="{{ form.confirm_password.id_for_label }}">确认密码</label>
                                    {{ form.confirm_password }}
                                </p>
                                <!-- 中文水平输入框 -->
                                <p>
                                    <label for="{{ form.chinese_level.id_for_label }}">{{ form.chinese_level.label }}</label>
                                    {{ form.chinese_level }}
                                </p>
                                <!-- 学科代码输入框 -->
                                <p>
                                    <label for="subject_code">学科代码</label>
                                    <input type="text" id="subject_code" name="subject_code" onkeyup="searchSubjects(this.value)">
                                </p>
                                <div id="subject_search_results" style="max-height: 200px; overflow-y: auto;"></div>
                                <!-- 学科名称输入框 -->
                                <p>
                                    <label for="subject_name">学科名称</label>
                                    <input type="text" id="subject_name" name="subject_name" onkeyup="searchSubjectsByName(this.value)">
                                </p>
                                <!-- 注册按钮 -->
                                <p style="margin-top: 20%;width:111%;">
                                    <button type="submit">注册</button>
                                </p>
                            </form>
                            <!-- 跳转登录链接 -->
                            <p>已有账号？<a href="{% url 'login' %}">登录</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function searchSubjects(query) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `/subject_search/?query=${query}`, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const results = JSON.parse(xhr.responseText);
                    const resultsDiv = document.getElementById('subject_search_results');
                    resultsDiv.innerHTML = '';
                    // 只取前 10 个结果
                    const limitedResults = results.slice(0, 10);
                    limitedResults.forEach(result => {
                        const div = document.createElement('div');
                        div.textContent = `${result.code} - ${result.name}`;
                        div.onclick = function() {
                            document.getElementById('subject_code').value = result.code;
                            document.getElementById('subject_name').value = result.name;
                            resultsDiv.innerHTML = '';
                        };
                        resultsDiv.appendChild(div);
                    });
                }
            };
            xhr.send();
        }

        function searchSubjectsByName(query) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `/subject_search/?query=${query}`, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const results = JSON.parse(xhr.responseText);
                    const resultsDiv = document.getElementById('subject_search_results');
                    resultsDiv.innerHTML = '';
                    // 只取前 10 个结果
                    const limitedResults = results.slice(0, 10);
                    limitedResults.forEach(result => {
                        const div = document.createElement('div');
                        div.textContent = `${result.code} - ${result.name}`;
                        div.onclick = function() {
                            document.getElementById('subject_code').value = result.code;
                            document.getElementById('subject_name').value = result.name;
                            resultsDiv.innerHTML = '';
                        };
                        resultsDiv.appendChild(div);
                    });
                }
            };
            xhr.send();
        }
    </script>
{% endblock %}
